<template>
  <div class="loginPage">
    <div class="loginHead">
      <div class="loginImg">
        <img src="../../assets/img/loginBg.jpg" alt="">
        <div class="goback">
          <van-icon class-prefix="icon" class="iconfont" name="jiantouzuo" size="30" color="#fff" @click="$router.go(-1)"></van-icon>
        </div>
      </div>
    </div>
    <h1>用户登录</h1>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          登陆
        </van-button>
       </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (value) {
      const userInfo = {
        nickName: value.username,
        avatar: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2768442038,1247827365&fm=26&gp=0.jpg'
      }
      this.setUserInfo(userInfo)
      const accessToken = 'sdfdsdfdfdsfsdfdwwe'
      localStorage.setItem('access_token', accessToken)
      // 登陆成功后在Toast回调函数中跳转地址
      Toast({
        message: '登陆成功',
        duration: 500,
        onClose: () => {
          if (this.$route.query.from) {
            this.$router.push(this.$route.query.from)
          } else {
            this.$router.push('/home')
          }
        }
      })
    },
    ...mapMutations('login', ['setUserInfo'])
  }
}
</script>

<style lang="scss" scoped>
.loginPage {
  text-align: center;
  h1 {
    margin: 10px 0;
    font-size: 22PX;
    font-weight: 500;
  }
}
.loginHead {
  .loginImg {
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .goback {
      i {
        position: absolute;
        left: 10px;
        top: 14px;
      }
    }
  }
}
</style>
